<template>
	<view class="page">
		<!-- <u-navbar :fixed="false" title="首页" bgColor="#397EF5" v-if="topShow" /> -->
	    <view class="t-bg">
			<view class="top-back">
				<view class="mobeil">
					<image src="../../static/img/mobile.png" mode=""></image>
				</view>
				<view class="code">{{recordLoginText}}</view>
			</view>
		  
		  <view class="grille van-top">
			  <text @click="toLog">
				<view class="t-f">
				  <view class="t-l">
					<text>{{simInfo.usePkgName}}</text>
					<!-- <span>未实名</span> -->
				  </view>
				  <view class="t-r">套餐有效期 <text>{{simInfo.endTimeString}}</text></view>
				</view>
				<view class="flowInfo">
					<CustomProgress :value="percent" :start_color='"#4792FF"' :end_color='"#4792FF"' :bg_color="'#ECF4FF'" :progress_height="150"/>
					<view class="flowType">
						<view style="font-size: 1.3rem; padding-bottom: .5rem">
						 {{ simInfo.cardStateName }}
						</view>
						<text class='u-progress-info'>卡状态</text>
					</view>
				</view>
				<view class="total-liu">
				  <view class="l-l">总流量<text>{{ fluxMtoG(simInfo.flowRate || 0) }}G</text></view>
				  <view class="l-l">剩余流量<text>{{ fluxMtoG(simInfo.surplusFlowRate || 0) }}G</text></view>
				  <view class="l-l">已使用<text>{{ fluxMtoG((simInfo.flowRate * 1 - simInfo.surplusFlowRate * 1) || 0 )}}G</text></view>
				</view>
			  </text>
	  
			  <view class="user-price" v-if="simInfo.depositPrice>0">
				<view class="price-l">合约余额</view>
				<view class="price-r">
				  <view class="text-num">￥{{ simInfo.depositPrice }}</view>
				  <view class="text-link" @click="detailsTo">查询详情</view>
				</view>
			  </view>
			</view>
		  
		  
	      <view class="grille">
	        <view class="grille-item" @click="handleClick('toBalanceRecharge')">
	          <view class="img-1">
	            <image src="./../../static/img/1_1.png" alt="">
	          </view>
	          <view class="icon-text">套餐订购</view>
	        </view>
	        <view class="grille-item" @click="handleClick('toRecharge')">
	          <view class="img-1">
	            <image src="./../../static/img/2_1.png" alt="">
	          </view>
	          <view class="icon-text">余额充值</view>
	        </view>
	        <view class="grille-item" @click="handleClick('realNameRegister')">
	          <view class="img-1">
	            <image src="./../../static/img/3_1.png" alt="">
	          </view>
	          <view class="icon-text">实名认证</view>
	        </view>
			
	
	       <view class="grille-item" @click="handleClick('activeSim')">
	          <view class="img-1">
	            <image src="./../../static/img/30_1.png" alt="">
	          </view>
	          <view class="icon-text">一键复机</view>
	        </view>
	
	        <view class="grille-item"  @click="toLog">
	          <view class="img-1">
	            <image src="./../../static/img/34_1.png" alt="">
	          </view>
	          <view class="icon-text">套餐详情</view>
	        </view>
	
	        <view class="grille-item" @click="kfClick">
	          <view class="img-1">
	            <image src="./../../static/img/32_1.png" alt="">
	          </view>
	          <view class="icon-text">联系客服</view>
	        </view>
	
	
	        <view class="grille-item" @click="outLogin">
	          <view class="img-1">
	            <image src="./../../static/img/31_1.png" alt="">
	          </view>
	          <view class="icon-text">退出登录</view>
	        </view>
	
	        <view class="grille-item" @click="gotoMore">
	          <view class="img-1">
	            <image src="./../../static/img/4_1.png" alt="">
	          </view>
	          <view class="icon-text">更多</view>
	        </view>
	      
	      </view>
	    </view>
	    <view class="allowance w">
	      <view class="t">
	        <view class="hit">热门活动 | </view>
	        <view class="hit1"> 热门畅销 为你精选</view>
	      </view>
		  <u-swiper class="my-swipe" :list="list1" @change="change"  @click="goQuan" height="180"></u-swiper>
	    </view>
		<u-popup :show="uShow" mode="center"  @close="close"  :round="10">
			<view class="title">提示</view>
			<view class="massage">{{msg}}</view>
			<view class="btn-flex">
				<u-button  shape="circle" @click="close">取消</u-button>
				<u-button type="primary" shape="circle" @click="sumbit">确认</u-button>
			</view>
		</u-popup>
		
		<u-popup :show="pkgListVisible" mode="center"  @close="pkgListVisible = false" :round="10" :closeable="true">
			<view class="title" v-if="simInfo.simPackageList.length > 0">在用套餐</view>
			<view class="title" v-else style="color: red">在用套餐</view>
			<view class="flex-items" v-for="item in simInfo.simPackageList" :key="item.id">
				<view class="items-name">{{ item.packageName }}</view>
				<view class="items">生效时间： {{ item.startTime }}</view>
				<view class="items" v-if="
                  new Date(
                    getDateByTimeStr(item.endTime)[0],
                    getDateByTimeStr(item.endTime)[1],
                    getDateByTimeStr(item.endTime)[2],
                    getDateByTimeStr(item.endTime)[3],
                    getDateByTimeStr(item.endTime)[4],
                    getDateByTimeStr(item.endTime)[5]
                  ) < new Date()" style="color: red">过期时间： {{ item.endTime }}</view>
				  <view class="items" v-else>过期时间： {{ item.endTime }}</view>
			</view>
			<view style="margin-top:20upx;">
				<view class="title" v-if="simInfo.simNextPackageList.length > 0">次月套餐</view>
				<view class="title" v-else style="color: red">当前暂未订购次月套餐</view>
				<view class="flex-items" v-for="item in simInfo.simNextPackageList" :key="item.id">
					<view class="items-name">{{ item.packageName }}</view>
					<view class="items">生效时间： {{ item.startTime }}</view>
					<view class="items" v-if="
				      new Date(
				        getDateByTimeStr(item.endTime)[0],
				        getDateByTimeStr(item.endTime)[1],
				        getDateByTimeStr(item.endTime)[2],
				        getDateByTimeStr(item.endTime)[3],
				        getDateByTimeStr(item.endTime)[4],
				        getDateByTimeStr(item.endTime)[5]
				      ) < new Date()" style="color: red">过期时间： {{ item.endTime }}</view>
					  <view class="items" v-else>过期时间： {{ item.endTime }}</view>
				</view>
			</view>
		</u-popup>
		<view class="v-dialog" v-if="isDialogShow">
			<view class="v-dialog-bg"></view>
			<view class="v-dialog-content">
				<view class="updateApp">新版本已来袭</view>
				<view class="title">1、新版APP已上架啦！更多优惠活动 请更新查询</view>
				<view class="btn-flex">
					<!-- <view class="btn-items btn-left" @click="isDialogShow=false">以后再说</view> -->
					<view class="btn-right" @click="update">更新APP</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import CustomProgress from '@/components/CustomProgress.vue'
	export default {
		components:{
			CustomProgress
		},
		data() {
			return {
				saleType:uni.getStorageSync('saleType'),
				giveSimAccount:uni.getStorageSync('giveSimAccount'),
				iccid:'',
				simInfo:{
					simNextPackageList:[],
					simPackageList:[]
				},
				percent:0,
				isShieldAgent: uni.getStorageSync('isShieldAgent') == 1 ? true : false,
				recordLoginText:uni.getStorageSync('virtualNo'),
				code:'',
				uShow:false,
				topShow:false,
				appLoad:'',
				appVersion:'',
				isDialogShow:false,
				pkgListVisible:false,
				msg:"",
				list1: ['./../../static/img/10_2.png']
			}
		},
		onLoad() {
		},
		created() {
			
		},
		onShow(){
			this.$api.appTitle({iccid:uni.getStorageSync('iccid') || ''}).then(res=>{
				if(res.code !== '200'){
					this.code = res.code
					this.msg = res.message
					this.uShow = true
				}
			})
			
			uni.removeStorageSync('orderNo')
			this.iccid = uni.getStorageSync('iccid') || ''
			if(this.iccid){
				this.$api.userInfo({iccid:this.iccid}).then(res=>{
					if(res.code === '200'){
						this.simInfo = res.data
						var arr = ['iccid','phoneNo','virtualNo','supplierCode','basePkgGroup','salePrice','imgUrl','payPrice','giveSimAccount']
						uni.setStorageSync('userInfo',res.data)
						arr.forEach(item=>{
							uni.setStorageSync(item,res.data[item])
						})
						this.percent = this.simInfo.usedFlowRate ? Math.floor((this.simInfo.usedFlowRate / this.simInfo.flowRate) * 100) : 0;
					}else{
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			}
			this.appVersion = uni.getStorageSync('appVersion') || ''
			switch (uni.getSystemInfoSync().platform) {
				case 'android':
					this.topShow = true
					this.upDateApp()
					break;
				case 'ios':
					this.topShow = true
					console.log('运行iOS上');
					break;
				default:
					this.topShow = false
					console.log('运行在开发者工具上');
					break;
			}
			let status = navigator.userAgent.toLowerCase();
			if (status.match(/MicroMessenger/i) == "micromessenger") {
				this.topShow = false
			} else {
				this.topShow = false
			}
		},
		mounted(){
			
		},
		methods: {
			goXieyi(){
				uni.navigateTo({
					url:'/pages/user/xieyi'
				})
			},
			goYingsi(){
				uni.navigateTo({
					url:'/pages/user/yingsi'
				})
			},
			
			toLog(){
				uni.navigateTo({
					url:'/pages/rechargeRecord/index'
				})
			},
			detailsTo(){
				uni.navigateTo({
					url:'/pages/deposit/index'
				})
			},
			//检查当前app的版本
			upDateApp(){
				this.$api.appUpDate().then(res=>{
					if(res.code=== '200'){
						this.appLoad = res.data.appLoad
						if(this.appVersion !== res.data.appVersion && this.appVersion){
							this.isDialogShow = true
							uni.setStorageSync("appNewVersion",res.data.appVersion);
						}else if(!this.appVersion){
							uni.setStorageSync("appVersion",res.data.appVersion);
						}
					}
				})
			},
			//app更新
			update(){
				uni.showLoading({
					title: 'APP更新中...',
					mask: true
				})
				var dtask = plus.downloader.createDownload(this.appLoad,{method: "GET"}, (d, status) => {
					if (status == 200) {
						//plus.runtime.install(d.filename);
						//uni.setStorageSync("appVersion",uni.getStorageSync("appNewVersion"));
						plus.runtime.install(d.filename, {force: false
							}, function() {
								uni.setStorageSync("appVersion",uni.getStorageSync("appNewVersion"));
								plus.runtime.restart();
							}, (e) => {
								console.log(e);
								uni.showToast({
									title: '安装升级包失败',
									icon: 'none'
								})
						});
						
					} else {
						plus.nativeUI.alert("安装失败，请稍候重试: " + status)
					}
				});
				dtask.start();
			},
			kfClick(){
				this.$api.kefuUrl({iccid:uni.getStorageSync('iccid') || ''}).then(res=>{
					let urls=res.data;
					console.log("当前客服链接为"+urls);
					//#ifdef H5
					window.location.href = urls
					//#endif
					//#ifdef APP-PLUS
					uni.navigateTo({
						url:"/pages/index/webview?url=" + urls
					})
					//#endif
					
				})
			},
			fluxMtoG(data){
				return this.$utils.fluxMtoG(data)
			},
			close(){
				this.uShow = false
			},
			goQuan(){},
			change(){},
			//新用户的话，除了客服按钮其他按钮都禁止点击
			handleClick(type){
				// if(!this.iccid)return
				var params ={
					iccid:uni.getStorageSync('iccid') || '',
					basePkgGroup:this.simInfo.basePkgGroup || ''
				}
				// code=400 卡号不存在提醒，弹窗 message信息， 用户点击 确认，跳转绑定卡号页面
				// code=401 购买优惠券提醒，弹窗 message信息， 用户点击 确认，跳转购买赠送金页面
				// code=其它， 不做处理
				this.$api.menunPorwer(params).then(res=>{
					if(res.code === '400' || res.code === '401' ){
						this.code = res.code
						this.msg = res.message
						this.uShow = true
					}else {
						if(type === 'toRecharge'){
							uni.navigateTo({
								url:'/pages/recharge/index'
							})
						}else if (type === 'activeSim'){
							this.$api.active({iccid:uni.getStorageSync('iccid') || ''}).then(res=>{
								if(res.message=='成功'){
									uni.showToast({
										title: '复机成功，请重启手机后即可畅享网络!',
										icon: 'none'
									})
								}else{
									uni.showToast({
										title: res.message,
										icon: 'none'
									})
								}
								
							})
						}else if(type === 'toBalanceRecharge'){
							uni.navigateTo({
								url: '/pages/trafficPacket/index'
							})
						}else if(type === 'realNameRegister'){
							this.communicate()
						}	
					}
				})
			},
			//退出登录
			outLogin(){
				uni.removeStorageSync('userPhone')
				uni.removeStorageSync("iccid")
				uni.removeStorageSync("userInfo")
				uni.redirectTo({
					url: '/pages/login/index'
				})
			},
			//弹窗确认
			sumbit(){
				// code=400 卡号不存在提醒，弹窗 message信息， 用户点击 确认，跳转绑定卡号页面
				// code=401 购买优惠券提醒，弹窗 message信息， 用户点击 确认，跳转购买赠送金页面
				// code=402 购买套餐提醒，弹窗 message信息， 用户点击 确认，跳转购买套餐页面
				// code=403 实名提醒，弹窗 message信息， 用户点击 确认，调用 10的接口进行跳转
				if(this.code === '400'){
					uni.navigateTo({
						url:'/pages/bindingCard/index'
					})
				}else if(this.code === '401'){
					console.log('支付类型'+this.saleType)
					if(this.saleType==20){ // 赠送20元余额页面
						this.$utils.navigateTo('/pages/simAllOpenThree/index')
					}else {
						this.$utils.navigateTo('/pages/user/simOpens')
					}
				}else if(this.code === '402'){
					uni.navigateTo({
						url:'/pages/trafficPacket/index'
					})
				}else if(this.code === '403'){
					this.communicate()
				}else {
					this.uShow = false
				}
			},
			//实名认证
			communicate(){
				this.$api.authUrl({iccid:uni.getStorageSync('iccid') || '',supplierCode:this.simInfo.supplierCode || ''}).then(res=>{
					// code=409 表示是联调，需要跳转联通小程序实名。
					// code=408 表示是电信，直接跳转 data里面的链接
					// code=407 表示是移动,直接跳转data里面链接。
					if(res.code === '407' || res.code === '408' ){
						//#ifdef H5 
						window.location.href = res.data
						//#endif
						//#ifdef APP-PLUS
						plus.runtime.openURL(res.data)
						//#endif
					}else if(res.code === '409'){
						
					}else {
						uni.showToast({
							title: '当前设备已经完成实名认证，无需重复认证！',
							icon: 'none'
						})
					}
				})
			},
			gotoView(){
				if(!uni.getStorageSync('iccid')){
					return
				}
				var params ={
					iccid:uni.getStorageSync('iccid') || '',
					basePkgGroup:this.simInfo.basePkgGroup || ''
				}
				this.$api.menunPorwer(params).then(res=>{
					if(res.code === '400' || res.code === '401' ){
						this.code = res.code
						this.msg = res.message
						this.uShow = true
					}else {
						uni.navigateTo({
							url:'/pages/zhenduan/index'
						})
					}
				})
				
			},
			gotoMore() {
				uni.navigateTo({
					url:'/pages/operation/index'
				})
			},
			getDateByTimeStr(timeStr) {
				if (timeStr && typeof timeStr === "string") {
					let dayStr = timeStr.split(" ")[0].split("-");
					let hourStr = timeStr.split(" ")[1].split(":");
					return dayStr.concat(hourStr);
				}
				return timeStr;
			},
			
		}
	}
</script>

<style scoped lang="scss">
	.u-navbar {
		::v-deep .u-navbar__content__left {
			display: none;
		}
	
		::v-deep .u-navbar__content__title {
			color: #fff;
		}
	}
	.items-name{
		margin-bottom:20upx;
		
	}
	.items{
		color:#999;
		font-size:14px;
	}
	view {
	  display: flex;
	  flex-grow: 0;
	  flex-basis: auto;
	  align-items: stretch;
	  flex-direction: column;
	}
	.w {
	  width: 90%;
	}
	.page {
	  background: #f7f8fa url("../../static/img/h_bg.png") no-repeat;
	  background-position: 0% 0%;
	  background-size: 100% 100%;
	  display: flex;
	  flex-direction: column;
	  flex: 1;
	  padding-bottom:60px;
	  .t-bg{
	    background-image: linear-gradient(#3980F9,#fff);
	  }
	  .top-back {
	    flex-direction: row;
	    align-items: center;
	    height: 60px;
	    display: flex;
	    text-align: center;
	    font-size: 17px;
	    color: #FFFFFF;
	    font-weight: bold;
		margin:0 14px;
		justify-content: space-between;
		.mobeil{
			align-items: center;
			width: 84px;
			image{
				width:100%;
				height:26px;
			}
		}
	    .back {
	      align-items: center;
	      width: 60px;
	      image {
	        width: 20px;
	      }
	    }
	    .code {
	      align-items: center;
	    }
	  }
	  .grille {
	    display: flex;
	    align-self: center;
	    flex-direction: row;
	    margin: 10px auto;
	    background-color: #fff;
	    border-radius: 16px;
	    align-content: flex-start;
	    flex-wrap: wrap;
	    width: 90%;
	    .grille-item {
	      width: 25%;
	      margin: 10px 0px 10px;
	      align-items: center;
	      .img-1 {
	        width: 40px;
	        height: 40px;
			image{
				width:100%;
				height:100%;
			}
	      }
	      .icon-text {
	        font-size: 12px;
	        color: #333;
	        margin-top: 5px;
	      }
	    }
	  }
	  .flowInfo {
	    position: relative;
	    margin-top: 20px;
	    text-align: center;
	    margin-bottom:16px;
		.flowType {
			position: absolute;
			width: 14.5rem;
			height: 14.5rem;
			top: 60px;
			left: calc(50% - 7.25rem);
		}
	  }
	  .van-top{
	      padding:13px 14px;
	      width: calc(90% - 28px);
	      display: block;
	      .t-f{
	        justify-content: space-between;
	        flex-direction: row;
	        width: 100%;
	        flex: 1;
	        .t-l,.t-r{
	          flex-direction: row;
	          align-items: center;
	        }
	        .t-r{
	          color:#999;
	          text{
	            color: #333333;
	            padding-left:6px;
	          }
	        }
	        .t-l{
	          text{
	            display: inline-block;
	            &:first-child{
	              /* width: 56px; */
	              height: 20px;
	              font-family: PingFangSC, PingFang SC;
	              font-weight: 500;
	              font-size: 14px;
	              color: #333333;
	              line-height: 20px;
	              margin-right:7px;
	            }
	            /* &:last-child{
	              width: 37px;
	              height: 17px;
	              border-radius: 4px;
	              border: 1px solid #CACACA;
	              font-family: PingFangSC, PingFang SC;
	              font-weight: 400;
	              font-size: 10px;
	              color: #999999;
	              text-align: center;
	              line-height: 17px;
	            } */
	          }
	        }
	      }
	      .total-liu{
	        flex-direction: row;
	        justify-content: space-between;
	        align-items: center;
	        margin-top: 20px;
	        padding-bottom: 6px;
	        border-bottom: 1px solid #EDEDED;
	        .l-l{
	          display: block;
	          color: #999999;
	          font-size: 10px;
	          text{
	            width: 32px;
	            height: 17px;
	            font-family: HarmonyOS_Sans_SC_Bold;
	            font-size: 12px;
	            color: #333333;
	            line-height: 17px;
	            padding-left: 6px;
	          }
	        }
	      }
	      .user-price{
	        margin-top:18px;
	        flex-direction: row;
	        justify-content: space-between;
	        align-items: center;
	        .price-l{
	          font-family: PingFangSC, PingFang SC;
	          font-weight: 400;
	          font-size: 14px;
	          color: #999999;
	          line-height: 20px;
	          background: url('../../static/img/yur.png') no-repeat center left;
	          background-size:20px 20px;
	          padding-left:28px;
	        } 
	        .price-r{
	          flex-direction: row;
	          justify-content: space-between;
	          align-items: center;
	          .text-num{
	            font-family: HarmonyOS_Sans_SC_Bold;
	            font-size: 14px;
	            color: #333333;
	            line-height: 19px;
	          }
	          .text-link{
	            font-family: PingFangSC, PingFang SC;
	            font-weight: 400;
	            font-size: 14px;
	            color: #397EF5;
	            line-height: 20px;
	            text-decoration-line: underline;
	          }
	        }
	      }
	    }
	  .allowance {
	    align-self: center;
	    flex-direction: column;
	    margin-top: 15px;
	    justify-content: center;
	    background: #fff;
	    border-radius: 20px;
	    padding: 10px;
	    width: 87%;
	    .balanceBox {
	      display: flex;
	      flex-direction: column;
	      // background: #f7f8fa;
	      border-radius: 8px;
	      position: relative;
	      margin-top: 5px;
	      padding: 0 15px 15px;
	      .balance-item {
	        flex: 1;
	        display: flex;
	        flex-direction: row;
	        margin-top: 15px;
	        .balance-icon {
	          width: 18px;
	          height: 18px;
	          margin-right: 5px;
	        }
	        .text12-view {
	          flex: 1;
	        }
	        .text-num {
	          font-size: 13px;
	          color: #06121e;
	          font-weight: 700;
	        }
	        .text-link {
	          font-size: 13px;
	          font-weight: 500;
	          color: #1c96f6;
	          text-decoration: underline;
	          margin-left: 15px;
	        }
	      }
	    }
	    .btn-link {
	      height: 46px;
	      width: 90%;
	      margin: 0 auto;
	      line-height:46px;
	      text-align: center;
	      border-radius: 26px;
	      background: #397EF5 url('../../static/img/52.png') no-repeat 60px center;
	      background-size:19px 22px;
	      color:#fff; 
	    }
	    .t {
	      display: flex;
	      flex-direction: row;
	      width: 320px;
	      align-items: center;
	      margin-bottom: 16px;
	      .t-img {
	        width: 26px;
	        height: 26px;
	      }
	      .hit {
	        color: #333;
	        font-weight: 500;
	        font-size: 14px;
	      }
	      .hit1 {
	        color: #999;
	        font-size: 14px;
	        padding-left:10px;
	      }
	    }
	    .my-swipe {
	      color: #fff;
	      font-size: 20px;
	      text-align: center;
	    }
	  }
	}
	::v-deep .u-popup__content{
		width:80%;
		padding:30upx;
		.massage{
			color: #646668;
			font-size: 28upx;
		}
		.btn-flex{
			flex-direction: row;
			margin-top:40upx;
			.u-button{
				width:45%;
				height:100upx;
			}
		}
		.title{
			margin-bottom:40upx;
			font-size:36upx;
		}
	}
	.v-dialog{
	    position:absolute;
	    width:100%;
	    height:100%;
	    top:0;
	    bottom: 0;
	    left:0;
	    right:0;
	    margin:auto;
	    .v-dialog-bg{
	        position: fixed;
	        background: rgba(0,0,0, .7);
	        top:0;
	        bottom: 0;
	        left:0;
	        right:0;
	        margin:auto;
	        width:100%;
	        height:100%;
	    }
		.v-dialog-content{
			position: fixed;
			top:0;
			bottom: 0;
			left:0;
			right:0;
			margin:auto;
			width: 80%;
			height: 640rpx;
			background:url('../../static/images/update.png') no-repeat center;
			background-size:100% 100%;
			border-radius:20rpx;
			text-align: center;
			.updateApp{
				margin-top:266rpx;
				color: #333;
				font-size: 40rpx;
				font-weight: 500;
				font-family: PingFangSC-Medium, PingFang SC;
			}
			.title{
				font-size:28rpx;
				color: #646668;
				padding:40px 0;
			}
			.btn-flex{
				display: flex;
				.btn-items{
					width:150px;
					border-radius: 60rpx;
					font-size:18px;
					padding:30rpx 0;
					margin-left:24px;
				}
				.btn-right{
					border-radius: 52rpx;
					font-size:18px;
					padding:22rpx 0;
					background: #397EF5;
					margin: auto;
					width:80%;
					color:#fff;
				}
			}
		}
	}
	.u-progress-content {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.u-progress-dot {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		background-color: #fb9126;
	}
	
	.u-progress-info {
		font-size: 28rpx;
		padding-left: 16rpx;
		letter-spacing: 2rpx
	}
</style>
